<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D卡片组件</title>
	</head>
	<style>
		/* 设置容器的样式 */
		.container {
		    position: relative; /* 相对定位 */
		    width: 190px; /* 宽度 */
		    height: 254px; /* 高度 */
		    transition: 200ms; /* 过渡效果 */
		  }
		  
		  /* 激活状态下容器的样式 */
		  .container:active {
		    width: 180px; /* 宽度变小 */
		    height: 245px; /* 高度变小 */
		  }
		  
		  /* 卡片样式 */
		  #card {
		    position: absolute; /* 绝对定位 */
		    inset: 0; /* 四边与父容器对齐 */
		    z-index: 0; /* 层级 */
		    display: flex; /* 弹性布局 */
		    justify-content: center; /* 水平居中对齐 */
		    align-items: center; /* 垂直居中对齐 */
		    border-radius: 20px; /* 边框圆角 */
		    transition: 700ms; /* 过渡效果 */
		    background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%); /* 背景渐变色 */
		  }
		  
		  /* 子标题样式 */
		  .subtitle {
		    transform: translateY(160px); /* Y轴方向上的位移 */
		    color: rgb(134, 110, 221); /* 文字颜色 */
		    text-align: center; /* 文字居中对齐 */
		    width: 100%; /* 宽度 */
		  }
		  
		  /* 标题样式 */
		  .title {
		    opacity: 0; /* 透明度 */
		    transition-duration: 300ms; /* 过渡时间 */
		    transition-timing-function: ease-in-out-out; /* 过渡动画的时间函数 */
		    transition-delay: 100ms; /* 过渡延迟时间 */
		    position: absolute; /* 绝对定位 */
		    font-size: x-large; /* 字体大小 */
		    font-weight: bold; /* 字体粗细 */
		    color: white; /* 文字颜色 */
		  }
		  
		  /* 鼠标悬停在追踪器上时显示标题 */
		  .tracker:hover ~ #card .title {
		    opacity: 1; /* 显示标题 */
		  }
		  
		  /* 提示文字样式 */
		  #prompt {
		    bottom: 8px; /* 底部定位 */
		    left: 12px; /* 左侧定位 */
		    z-index: 20; /* 层级 */
		    font-size: 20px; /* 字体大小 */
		    font-weight: bold; /* 字体粗细 */
		    transition: 300ms ease-in-out-out; /* 过渡效果 */
		    position: absolute; /* 绝对定位 */
		    max-width: 110px; /* 最大宽度 */
		    color: rgb(255, 255, 255); /* 文字颜色 */
		  }
		  
		  /* 追踪器样式 */
		  .tracker {
		    position: absolute; /* 绝对定位 */
		    z-index: 200; /* 层级 */
		    width: 100%; /* 宽度 */
		    height: 100%; /* 高度 */
		  }
		  
		  /* 鼠标悬停在追踪器上时隐藏提示文字 */
		  .tracker:hover ~ #card #prompt {
		    opacity: 0; /* 隐藏提示文字 */
		  }
		  
		  /* 鼠标悬停在追踪器上时卡片的样式 */
		  .tracker:hover ~ #card {
		    transition: 300ms; /* 过渡效果 */
		    filter: brightness(1.1); /* 亮度增加 */
		  }
		  
		  /* 鼠标悬停在容器上时在卡片前面添加一个遮罩层 */
		  .container:hover #card::before {
		    transition: 200ms; /* 过渡效果 */
		    content: ''; /* 内容为空 */
		    opacity: 80%; /* 遮罩层透明度 */
		  }
		  
		  /* 3D效果容器样式 */
		  .canvas {
		    perspective: 800px; /* 透视效果 */
		    inset: 0; /* 四边与父容器对齐 */
		    z-index: 200; /* 层级 */
		    position: absolute; /* 绝对定位 */
		    display: grid; /* 网格布局 */
		    grid-template-columns: 1fr 1fr 1fr 1fr 1fr; /* 网格列布局 */
		    grid-template-rows: 1fr 1fr 1fr 1fr 1fr; /* 网格行布局 */
		    gap: 0px 0px; /* 网格间隙 */
		    grid-template-areas: "tr-1 tr-2 tr-3 tr-4 tr-5"
		      "tr-6 tr-7 tr-8 tr-9 tr-10"
		      "tr-11 tr-12 tr-13 tr-14 tr-15"
		      "tr-16 tr-17 tr-18 tr-19 tr-20"
		      "tr-21 tr-22 tr-23 tr-24 tr-25"; /* 网格区域布局 */
		  }
		  
		  /* 卡片的背景遮罩层样式 */
		  #card::before {
		    content: ''; /* 内容为空 */
		    background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%); /* 背景渐变色 */
		    filter: blur(2rem); /* 模糊效果 */
		    opacity: 30%; /* 遮罩层透明度 */
		    width: 100%; /* 宽度 */
		    height: 100%; /* 高度 */
		    position: absolute; /* 绝对定位 */
		    z-index: -1; /* 层级 */
		    transition: 200ms; /* 过渡效果 */
		  }
		  
		  /* 追踪器位置样式 */
		  .tr-1 {
		    grid-area: tr-1; /* 网格区域位置 */
		  }
		  .tr-2 {
		    grid-area: tr-2; /* 网格区域位置 */
		  }
		  .tr-3 {
		    grid-area: tr-3; /* 网格区域位置 */
		  }
		  .tr-4 {
		    grid-area: tr-4; /* 网格区域位置 */
		  }
		  .tr-5 {
		    grid-area: tr-5; /* 网格区域位置 */
		  }
		  .tr-6 {
		    grid-area: tr-6; /* 网格区域位置 */
		  }
		  .tr-7 {
		    grid-area: tr-7; /* 网格区域位置 */
		  }
		  .tr-8 {
		    grid-area: tr-8; /* 网格区域位置 */
		  }
		  .tr-9 {
		    grid-area: tr-9; /* 网格区域位置 */
		  }
		  .tr-10 {
		    grid-area: tr-10; /* 网格区域位置 */
		  }
		  .tr-11 {
		    grid-area: tr-11; /* 网格区域位置 */
		  }
		  .tr-12 {
		    grid-area: tr-12; /* 网格区域位置 */
		  }
		  .tr-13 {
		    grid-area: tr-13; /* 网格区域位置 */
		  }
		  .tr-14 {
		    grid-area: tr-14; /* 网格区域位置 */
		  }
		  .tr-15 {
		    grid-area: tr-15; /* 网格区域位置 */
		  }
		  .tr-16 {
		    grid-area: tr-16; /* 网格区域位置 */
		  }
		  .tr-17 {
		    grid-area: tr-17; /* 网格区域位置 */
		  }
		  .tr-18 {
		    grid-area: tr-18; /* 网格区域位置 */
		  }
		  .tr-19 {
		    grid-area: tr-19; /* 网格区域位置 */
		  }
		  .tr-20 {
		    grid-area: tr-20; /* 网格区域位置 */
		  }
		  .tr-21 {
		    grid-area: tr-21; /* 网格区域位置 */
		  }
		  .tr-22 {
		    grid-area: tr-22; /* 网格区域位置 */
		  }
		  .tr-23 {
		    grid-area: tr-23; /* 网格区域位置 */
		  }
		  .tr-24 {
		    grid-area: tr-24; /* 网格区域位置 */
		  }
		  .tr-25 {
		    grid-area: tr-25; /* 网格区域位置 */
		  }
		  
		  /* 鼠标悬停在追踪器上时卡片的旋转样式 */
		  .tr-1:hover ~ #card {
		    transition: 125ms ease-in-out; /* 过渡效果 */
		    transform: rotateX(20deg) rotateY(-10deg) rotateZ(0deg); /* 旋转效果 */
		  }
		  .tr-2:hover ~ #card {
		    transition: 125ms ease-in-out; /* 过渡效果 */
		    transform: rotateX(20deg) rotateY(-5deg) rotateZ(0deg); /* 旋转效果 */
		  }
		  .tr-3:hover ~ #card {
		    transition: 125ms ease-in-out; /* 过渡效果 */
		    transform: rotateX(20deg) rotateY(0deg) rotateZ(0deg); /* 旋转效果 */
		  }
		  .tr-4:hover ~ #card {
		    transition: 125ms ease-in-out; /* 过渡效果 */
		    transform: rotateX(20deg) rotateY(5deg) rotateZ(0deg); /* 旋转效果 */
		  }
		  .tr-5:hover ~ #card {
		    transition: 125ms ease-in-out; /* 过渡效果 */
		    transform: rotateX(20deg) rotateY(10deg) rotateZ(0deg); /* 旋转效果 */
		  }
		  .tr-6:hover ~ #card {
		    transition: 125ms ease-in-out; /* 过渡效果 */
		    transform: rotateX(10deg) rotateY(-10deg) rotateZ(0deg); /* 旋转效果 */
		  }
		  .tr-7:hover ~ #card {
		    transition: 125ms ease-in-out; /* 过渡效果 */
		    transform: rotateX(10deg) rotateY(-5deg) rotateZ(0deg); /* 旋转效果 */
		  }
		  .tr-8:hover ~ #card {
		    transition: 125ms ease-in-out; /* 过渡效果 */
		    transform: rotateX(10deg) rotateY(0deg) rotateZ(0deg); /* 旋转效果 */
		  }
		  .tr-9:hover ~ #card {
		    transition: 125ms ease-in-out; /* 过渡效果 */
		    transform: rotateX(10deg) rotateY(5deg) rotateZ(0deg); /* 旋转效果 */
		  }
		  .tr-10:hover ~ #card {
		    transition: 125ms ease-in-out; /* 过渡效果 */
		    transform: rotateX(10deg) rotateY(10deg) rotateZ(0deg); /* 旋转效果 */
		  }
		  .tr-11:hover ~ #card {
		    transition: 125ms ease-in-out; /* 过渡效果 */
		    transform: rotateX(0deg) rotateY(-10deg) rotateZ(0deg); /* 旋转效果 */
		  }
		  .tr-12:hover ~ #card {
		    transition: 125ms ease-in-out; /* 过渡效果 */
		    transform: rotateX(0deg) rotateY(-5deg) rotateZ(0deg); /* 旋转效果 */
		  }
		  .tr-13:hover ~ #card {
		    transition: 125ms ease-in-out; /* 过渡效果 */
		    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); /* 旋转效果 */
		  }
		  .tr-14:hover ~ #card {
		    transition: 125ms ease-in-out; /* 过渡效果 */
		    transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg); /* 旋转效果 */
		  }
		  .tr-15:hover ~ #card {
		    transition: 125ms ease-in-out; /* 过渡效果 */
		    transform: rotateX(0deg) rotateY(10deg) rotateZ(0deg); /* 旋转效果 */
		  }
		  .tr-16:hover ~ #card {
		    transition: 125ms ease-in-out; /* 过渡效果 */
		    transform: rotateX(-10deg) rotateY(-10deg) rotateZ(0deg); /* 旋转效果 */
		  }
		  .tr-17:hover ~ #card {
		    transition: 125ms ease-in-out; /* 过渡效果 */
		    transform: rotateX(-10deg) rotateY(-5deg) rotateZ(0deg); /* 旋转效果 */
		  }
		  .tr-18:hover ~ #card {
		    transition: 125ms ease-in-out; /* 过渡效果 */
		    transform: rotateX(-10deg) rotateY(0deg) rotateZ(0deg); /* 旋转效果 */
		  }
		  .tr-19:hover ~ #card {
		    transition: 125ms ease-in-out; /* 过渡效果 */
		    transform: rotateX(-10deg) rotateY(5deg) rotateZ(0deg); /* 旋转效果 */
		  }
		  .tr-20:hover ~ #card {
		    transition: 125ms ease-in-out; /* 过渡效果 */
		    transform: rotateX(-10deg) rotateY(10deg) rotateZ(0deg); /* 旋转效果 */
		  }
		  .tr-21:hover ~ #card {
		    transition: 125ms ease-in-out; /* 过渡效果 */
		    transform: rotateX(-20deg) rotateY(-10deg) rotateZ(0deg); /* 旋转效果 */
		  }
		  .tr-22:hover ~ #card {
		    transition: 125ms ease-in-out; /* 过渡效果 */
		    transform: rotateX(-20deg) rotateY(-5deg) rotateZ(0deg); /* 旋转效果 */
		  }
		  .tr-23:hover ~ #card {
		    transition: 125ms ease-in-out; /* 过渡效果 */
		    transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg); /* 旋转效果 */
		  }
		  .tr-24:hover ~ #card {
		    transition: 125ms ease-in-out; /* 过渡效果 */
		    transform: rotateX(-20deg) rotateY(5deg) rotateZ(0deg); /* 旋转效果 */
		  }
		  .tr-25:hover ~ #card {
		    transition: 125ms ease-in-out; /* 过渡效果 */
		    transform: rotateX(-20deg) rotateY(10deg) rotateZ(0deg); /* 旋转效果 */
		  }
		  
		  /* 禁止选中文本 */
		  .noselect {
		    -webkit-touch-callout: none; /* 禁止长按菜单 */
		    -webkit-user-select: none; /* 禁止选择文本（Chrome、Safari） */
		    -moz-user-select: none; /* 禁止选择文本（Firefox） */
		    -ms-user-select: none; /* 禁止选择文本（IE、Edge） */
		    user-select: none; /* 禁止选择文本（通用） */
		  }
	</style>
	<body>
		<div class="container noselect">
		    <div class="canvas">
		        <div class="tracker tr-1"></div>
		        <div class="tracker tr-2"></div>
		        <div class="tracker tr-3"></div>
		        <div class="tracker tr-4"></div>
		        <div class="tracker tr-5"></div>
		        <div class="tracker tr-6"></div>
		        <div class="tracker tr-7"></div>
		        <div class="tracker tr-8"></div>
		        <div class="tracker tr-9"></div>
		        <div class="tracker tr-10"></div>
		        <div class="tracker tr-11"></div>
		        <div class="tracker tr-12"></div>
		        <div class="tracker tr-13"></div>
		        <div class="tracker tr-14"></div>
		        <div class="tracker tr-15"></div>
		        <div class="tracker tr-16"></div>
		        <div class="tracker tr-17"></div>
		        <div class="tracker tr-18"></div>
		        <div class="tracker tr-19"></div>
		        <div class="tracker tr-20"></div>
		        <div class="tracker tr-21"></div>
		        <div class="tracker tr-22"></div>
		        <div class="tracker tr-23"></div>
		        <div class="tracker tr-24"></div>
		        <div class="tracker tr-25"></div>
		        <div id="card">
		            <p id="prompt">HOVER OVER :D</p>
		            <div class="title">look mom,<br>no JS</div>
		            <div class="subtitle">
		                mouse hover tracker
		            </div>
		
		        </div>
		    </div>
		</div>
	</body>
</html>